<template>
	<view>
		<u-cell-group title="选择回收订单">
			<!-- <view class="add"><text>请选择订单</text></view> -->
			<view class="u-p-30">
				<!-- <u-button @click="show = true"><u-icon name="plus"></u-icon><text class="u-p-l-10">点击选择订单</text></u-button> -->
				<u-button @click="startChooseOrder"><u-icon name="plus"></u-icon><text class="u-p-l-10">点击选择回收订单</text></u-button>
			</view>
			<u-cell-group class="u-m-b-20">
				<u-cell-item :title="res.number" v-for="(res, index) in list" :key="res.id" :use-label-slot="true" :arrow="false">
					<view slot="label" @click="goDetails(res.id)">
						<text>{{res.address.name}}</text>
						<text class="u-p-l-10">{{res.address.mobile}}</text>
					</view>
					<view slot="right-icon">
						<u-button type="error" size="mini" @click="delOrder(index)">删除</u-button>
					</view>
					<!-- <text>{{res.managestate}}</text> -->
				</u-cell-item>
			</u-cell-group>
		</u-cell-group>
		<u-cell-group title="选择站点">
			<u-cell-item icon="home" :title="storename" @click="show1 = true"></u-cell-item>
		</u-cell-group>
		<u-cell-group title="填写备注">
			<view class="u-p-l-20 u-p-r-20">
				<u-form label-width="auto" :label-style="{'color':'#909399'}">
					<u-form-item 
						label-position="top">
						<u-input v-model="order.remark" type="textarea" border input-align="left" placeholder="请输入备注"/>
					</u-form-item>
				</u-form>
			</view>
		</u-cell-group>
		
		<view class="u-p-30">
			<u-button type="primary" @click="confirmIn">确定提交</u-button>
		</view>
		<!-- 选择已回收订单 -->
		<u-popup v-model="show" mode="bottom" border-radius="14" length="80%">
			<orderList @confirm="confirm" @close="close"></orderList>
		</u-popup>
		<!-- 选择站点 -->
		<u-popup v-model="show1" mode="bottom" border-radius="14" length="80%">
			<storeList @confirm="confirm1" @close="close1"></storeList>
		</u-popup>
	</view>
</template>

<script>
	import orderList from './components/orderList.vue'
	import storeList from './components/storeList.vue'
	
	import {
		mapState
	} from 'vuex';
	export default {
		components:{
			orderList,
			storeList
		},
		data() {
			return {
				order: {
					orderid: [],
					storeid: 0,
					brotherpic: "",
					remark: ''
				},
				list: [],
				piclist: [],
				show: false,
				show1: false,
				storename: '--',
				fileUploadURL: getApp().globalData.fileUploadURL
 			}
		},
		computed: {
			...mapState({
				header: state => state.Authorization
			}),
			...mapState('brother', {
				chooseOrder: state => state.chooseOrder
			})
		},
		watch:{
			chooseOrder(val){
				console.log('chooseOrder',val)
				// this.confirm(val)
				this.list = this.chooseOrder
				
			}
		},
		onLoad() {
			// this.list = this.chooseOrder
		},
		methods: {
			// 上传现场照片
			uploadSuccess(data, index, lists, name) {
				this.order.brotherpic = []
				lists.forEach((item,index)=>{
					this.order.brotherpic.push(item.response.datas.path)
				})
			},
			// 上传图片失败时处理
			uploadError(data, index, lists, name) {
				uni.showToast({
					icon: 'none',
					title: '提交失败，请重试'
				})
			},
			// 获取返回订单
			confirm(arr){
				this.show = false
				this.list = arr
				console.log(arr)
			},
			// 关闭窗口
			close(state){
				this.show = state
			},
			// 获取返回站点
			confirm1(item){
				this.show1 = false
				this.order.storeid = item.id
				this.storename = item.name
				// this.list = arr
				console.log(item)
			},
			// 关闭窗口
			close1(state){
				this.show1 = state
			},
			// 删除已选择回收订单
			delOrder(index){
				this.list.splice(index,1)
			},
			// 确认提交
			confirmIn(){
				this.order.orderid = []
				this.list.forEach((item)=>{
					this.order.orderid.push(item.id)
				})
				console.log(this.order)
				this.$u.post('/Store/InOrder/Create',this.order).then((res)=>{
					uni.showToast({
						icon: 'none',
						title: res.msg
					})
					uni.redirectTo({
						url: '/pages/brother/incomOrder/incomOrder'
					})
				})
			},
			goDetails(id){
				uni.navigateTo({
					url: '/pages/brother/order/views/views?id='+id
				})
			},
			startChooseOrder(){
				uni.navigateTo({
					url: '/pages/brother/incomOrder/chooseOrderList/chooseOrderList'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header-title{
		padding: 30rpx 32rpx 10rpx 32rpx;
		font-size: 30rpx;
		text-align: left;
		color: #909399;
	}
</style>
